import * as THREE from "three";
// 导入轨道控制器
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"

// 导入动画库
import gsap from "gsap"

// 导入 dat.gui： 轻量级ui界面控制库
import * as dat from "dat.gui"


// 了解three.js最基本的内容
// 1、创建场景
const scene =  new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)

// 设置相机位置
camera.position.set(0,0,10)
scene.add(camera)
// 导入纹理
const textureLoader = new THREE.TextureLoader()
const door = textureLoader.load('./img.jpeg')

// 设置纹理偏移
// door.offset.x = 0.5
// door.offset.y = 0.5
// door.offset.set(0.5,0.5)

// 设置纹理旋转
door.center.set(0.5,0.5) // 设置旋转中心
// door.rotation = Math.PI/4 // 旋转45deg

// 设置纹理的重复
door.repeat.set(2,3)
door.wrapS = THREE.MirroredRepeatWrapping  // 设置水平纹理重复的模式
door.wrapT = THREE.RepeatWrapping // 设置垂直方向重复的模式




// 添加物体
const cubeGeometry = new THREE.BoxGeometry(1,1,1)

// 创建材质
const basicMaterial = new THREE.MeshBasicMaterial({
    // color: '#ffff00',
    map:door
});
// 创建几何体
const cube = new THREE.Mesh(cubeGeometry,basicMaterial)

scene.add(cube)

//初始化渲染器
const renderer = new THREE.WebGLRenderer({
    
})

// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
// 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果，必须在动画循环里调用update()
controls.enableDamping = true

//  添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 设置时钟
const clock = new THREE.Clock();

window.addEventListener('dblclick',()=>{
//    双击控制屏幕进入全屏，退出全屏
    if(!document.fullscreenElement){
        renderer.domElement.requestFullscreen()
    }else{
        document.exitFullscreen()
    }
})

function render(){
    controls.update()
    renderer.render(scene,camera)
    // 渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render)
}

render();


// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
    console.log('画面变化了~')
    // 更新摄像头
    camera.aspect = window.innerWidth/window.innerHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix()
    
    // 更新渲染器
    renderer.setSize(window.innerWidth,window.innerHeight)
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio)
    
})


const gui = new dat.GUI();
// 设置拉条
gui.add(cube.position,"x").min(0).max(5).step(0.01).name("移动x轴").onChange(v=>{
    console.log('植被修改：',v)
}).onFinishChange(v=>{
    console.log('[mLog] 完全停下来 -->',v)
});

let ani
const params = {
    color: '#ffff00',
    fn:()=>{
    //    让立方体运动起来
        if(ani){
            console.log('[mLog] ani -->',ani)
            ani.pause()
            cube.position.x = 0
            ani.restart()
        }else{
            ani = gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat:-1})
        }
    }
}
// 设置颜色
gui.addColor(params,"color").onChange(v=>{
    console.log('[mLog] v -->',v)
    cube.material.color.set(v)
})
// 设置选项框
gui.add(cube,"visible").name("是否显示")
// 设置按钮，点击触发某个事件
gui.add(params,'fn').name('立方体运动')

//
const folder = gui.addFolder("设置立方体")
folder.add(cube.material,'wireframe')
